<template>
  <div class="damai-page">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="logo">艺柒————演唱会抢票系统</div>
      <nav class="nav">
        <a href="#">首页</a>
      </nav>
      <el-input
          v-model="searchQuery"
          placeholder="搜索演唱会ID、标题或艺人"
          style="width: 300px"
          @keyup.enter="fetchConcerts"
      >
        <template #append>
          <el-button type="primary" @click="fetchConcerts">搜索</el-button>
        </template>
      </el-input>
      <!-- 修改后的用户操作区域 -->
      <div class="user-actions">
        <!-- 未登录状态 -->
        <div v-if="!isLoggedIn" class="login-status">
          <el-button type="text" @click="login">登录</el-button>
        </div>

        <!-- 已登录状态 -->
        <div v-else class="user-info">
          <el-dropdown @command="handleUserCommand" trigger="click">
            <span class="user-dropdown">
              <el-icon><User /></el-icon>
              {{ userInfo.nickname}}
              <el-icon class="el-icon--right"><arrow-down /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="myInfo">我的信息</el-dropdown-item>
                <el-dropdown-item command="myOrders">我的订单</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </header>

    <!-- 轮播图 -->
    <el-carousel height="410px" :autoplay="true">
      <el-carousel-item v-for="(item, index) in carouselList" :key="index">
        <img :src="item.img" class="carousel-img" alt="演唱会轮播图" />
      </el-carousel-item>
    </el-carousel>

    <!-- 筛选区域（城市 + 时间） -->
    <div class="filter-section">
      <!-- 城市筛选 -->
      <div class="city-filter">
        <label>城市:</label>
        <el-tag
            v-for="city in allCities"
            :key="city"
            :type="selectedCity === city ? 'primary' : ''"
            @click="handleCitySelect(city)"
        >{{ city }}</el-tag>
        <el-tag type="primary" @click="resetCity">全国</el-tag>
      </div>
<!--      &lt;!&ndash; 时间筛选 &ndash;&gt;-->
<!--      <div class="time-filter">-->
<!--        <label>时间:</label>-->
<!--        <el-tag-->
<!--            v-for="timeRange in timeRanges"-->
<!--            :key="timeRange.value"-->
<!--            :type="selectedTimeRange === timeRange.value ? 'primary' : ''"-->
<!--            @click="handleTimeSelect(timeRange.value)"-->
<!--        >{{ timeRange.label }}</el-tag>-->
<!--        <el-date-picker-->
<!--            v-model="customDateRange"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            @change="handleCustomDate"-->
<!--            class="custom-date-picker"-->
<!--        />-->
<!--      </div>-->
    </div>

    <!-- 演唱会列表 -->
    <div class="concert-section">
      <h3 class="section-title">演唱会</h3>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading">加载中...</div>

      <!-- 错误提示 -->
      <div v-if="error" class="error">{{ error }}</div>

      <!-- 空状态 -->
      <div v-if="!loading && !error && concertInfo.length === 0" class="empty">
        没有找到相关演唱会信息
      </div>

      <!-- 演唱会列表 -->
      <div class="concert-cards" v-if="!loading && !error && concertInfo.length > 0">
        <el-card
            v-for="(card, index) in concertInfo"
            :key="card.id || index"
            class="concert-card"
            @click="goToConcertDetail(card.id)"
        >
          <div class="card-content-wrapper">
            <!-- 图片区域 -->
            <div class="card-img-wrapper">
              <img :src="card.photo" class="card-img" alt="演唱会海报" />
            </div>
            <!-- 文字区域 -->
            <div class="card-text-wrapper">
              <p class="card-title">{{ card.title }}</p>
              <p class="card-artist">艺人: {{ card.artist }}</p>
              <p class="card-time">{{ formatDate(card.startdate) }}</p>
              <p class="card-status">{{ card.status === 1 ? '售票中' : '即将开售' }}</p>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 分页组件 -->
      <div class="pagination-container" v-if="!loading && !error && concertInfo.length > 0">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import Footer from '@/view/footer.vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import {User, ArrowDown} from '@element-plus/icons-vue';
import loginApi from '@/api/login_api.js'

const router = useRouter();

// 创建API客户端
const apiClient = axios.create({
  baseURL: 'http://localhost:8085',
  timeout: 10000,
});

// 响应式变量
const searchQuery = ref('');
const concertInfo = ref([]);
const loading = ref(false);
const error = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

// 用户相关变量
const userInfo = ref({
  nickname: '',
  realname: '',
  phone:'',
  id: 0
});

// 计算属性：判断是否已登录
const isLoggedIn = computed(() => {
  return !!localStorage.getItem("token");
});

// 城市筛选相关变量
const allCities = ref(['全部', '北京', '上海', '广州', '深圳', '成都', '杭州', '南京', '武汉']);
const selectedCity = ref('全部');

// 时间筛选相关变量
const timeRanges = ref([
  { label: '全部', value: 'all' },
  { label: '今天', value: 'today' },
  { label: '明天', value: 'tomorrow' },
  { label: '本周末', value: 'weekend' },
  { label: '一个月内', value: 'month' },
]);
const selectedTimeRange = ref('all');
const customDateRange = ref([]);

// 轮播图数据
const carouselList = ref([
  { img: 'https://img2.baidu.com/it/u=2438159428,931396326&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
  { img: 'https://img1.baidu.com/it/u=1995957879,4051069007&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
  { img: 'https://img1.baidu.com/it/u=1784420999,3772166039&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },
]);

// 获取用户信息
async function getUserInfo() {
  const token = localStorage.getItem("token");
  if (!token) {
    return;
  }
  try{
    const res = await loginApi.logininfo();
    userInfo.value= res;
  }catch (error){
    console.error("获取用户信息失败",error);
  }
}

// 用户下拉菜单命令处理
function handleUserCommand(command) {
  switch (command) {
    case 'myInfo':
      router.push('/user/profile');
      break;
    case 'myOrders':
      router.push('/user/orders');
      break;
    case 'logout':
      logout();
      break;
  }
}

// 登录
function login() {
  router.push({
    name: 'login',
  });
}

// 退出登录
function logout() {
  localStorage.removeItem("token");
  userInfo.value = { nickname: '', realname: '', phone: '', id: 0 };
  ElMessage.success('已退出登录');
  router.push('/');
}

// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  return date.toLocaleDateString();
};

// 处理城市选择
const handleCitySelect = (city) => {
  selectedCity.value = city;
  fetchConcerts();
};

// 重置城市选择
const resetCity = () => {
  selectedCity.value = '全部';
  fetchConcerts();
};

// 处理时间选择
const handleTimeSelect = (timeRange) => {
  selectedTimeRange.value = timeRange;
  customDateRange.value = []; // 重置自定义日期
  fetchConcerts();
};

// 处理自定义日期选择
const handleCustomDate = (dateRange) => {
  customDateRange.value = dateRange;
  selectedTimeRange.value = 'custom'; // 标记为自定义时间
  fetchConcerts();
};

// 搜索方法（多条件查询）
async function fetchConcerts() {
  currentPage.value = 1;
  await searchConcert();
}

// 分页大小变化
function handleSizeChange(newSize) {
  pageSize.value = newSize;
  searchConcert();
}

// 当前页变化
function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  searchConcert();
}

// 实际的搜索请求（支持多条件）
async function searchConcert() {
  try {
    loading.value = true;
    error.value = '';

    const params = {
      keyword: searchQuery.value,
      city: selectedCity.value === '全部' ? '' : selectedCity.value,
      timeRange: selectedTimeRange.value,
      startDate: customDateRange.value[0]?.getTime(),
      endDate: customDateRange.value[1]?.getTime(),
      current: currentPage.value,
      size: pageSize.value,
    };

    // 移除空参数
    Object.keys(params).forEach((key) => {
      if (params[key] === '' || params[key] === null || params[key] === undefined) {
        delete params[key];
      }
    });

    // 调用多条件查询接口
    const response = await apiClient.get('/concert/multiCondition', { params });

    if (response.data && response.data.code === 200) {
      concertInfo.value = response.data.data.records || [];
      total.value = response.data.data.total || 0;
    }
  } catch (err) {
    console.error('搜索失败:', err);
    error.value = '搜索失败，请稍后重试';
    ElMessage.error('搜索失败，请重试');
  } finally {
    loading.value = false;
  }
}

// 跳转到演唱会详情页
function goToConcertDetail(id) {
  router.push({
    name: 'ConcertDetail',
    params: { id },
  });
}

// 页面挂载时获取数据
onMounted(async () => {
  await getUserInfo(); // 获取用户信息
  await searchConcert();
});
</script>

<style scoped>
.damai-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 15px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #ff6700;
  flex-shrink: 0;
}

.nav a {
  margin: 0 15px;
  text-decoration: none;
  color: #333;
  padding: 5px;
}

.nav a:hover {
  color: #ff6700;
}

.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 筛选区域样式 */
.filter-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.city-filter,
.time-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.city-filter label,
.time-filter label {
  font-weight: 500;
  flex-shrink: 0;
}

.el-tag {
  cursor: pointer;
  margin-right: 5px;
}

.custom-date-picker {
  margin-left: 10px;
}

.concert-section {
  margin: 30px 0;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #ff6700;
  display: inline-block;
}

.concert-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.concert-card {
  width: 100%;
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  height: 300px;
}

.concert-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
}

.card-content-wrapper {
  display: flex;
  height: 100%;
}

.card-img-wrapper {
  width: 120px;
  height: 150px;
  flex-shrink: 0;
  margin-right: 15px;
  border-radius: 6px;
  overflow: hidden;
}

.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.concert-card:hover .card-img {
  transform: scale(1.05);
}

.card-text-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

.card-title {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: #222;
  min-height: 44px;
}

.card-artist {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-time {
  font-size: 14px;
  color: #888;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-status {
  color: #ff6700;
  font-weight: 500;
  font-size: 14px;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px dashed #eee;
}

.loading,
.error,
.empty {
  text-align: center;
  padding: 50px 0;
  font-size: 16px;
}

.error {
  color: #f56c6c;
}

.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  padding: 15px 0;
  background: #f9f9f9;
  border-radius: 8px;
}

.user-actions {
  margin-left: auto;
  flex-shrink: 0;
}

.login-status {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.user-dropdown:hover {
  background-color: #f5f5f5;
}

.user-dropdown .el-icon {
  margin-right: 5px;
}

.el-icon--right {
  margin-left: 5px;
  margin-right: 0;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .concert-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .user-actions {
    margin-left: 0;
    width: 100%;
    justify-content: flex-end;
  }

  .filter-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .city-filter,
  .time-filter {
    width: 100%;
  }

  .concert-cards {
    grid-template-columns: 1fr;
  }

  .card-img-wrapper {
    width: 100%;
    height: 200px;
    margin-right: 0;
    margin-bottom: 12px;
  }

  .card-content-wrapper {
    flex-direction: column;
  }
}
</style>

<!--<template>-->
<!--  <div class="damai-page">-->
<!--    &lt;!&ndash; 顶部导航栏 &ndash;&gt;-->
<!--    <header class="header">-->
<!--      <div class="logo">珍珍抢票系统</div>-->
<!--      <nav class="nav">-->
<!--        <a href="#">首页</a>-->
<!--      </nav>-->
<!--      <el-input-->
<!--          v-model="searchQuery"-->
<!--          placeholder="搜索演唱会ID、标题或艺人"-->
<!--          style="width: 300px"-->
<!--          @keyup.enter="fetchConcerts"-->
<!--      >-->
<!--        <template #append>-->
<!--          <el-button type="primary" @click="fetchConcerts">搜索</el-button>-->
<!--        </template>-->
<!--      </el-input>-->
<!--      &lt;!&ndash; 修改后的用户操作区域 &ndash;&gt;-->
<!--      <div class="user-actions">-->
<!--        &lt;!&ndash; 未登录状态 &ndash;&gt;-->
<!--&lt;!&ndash;        <div v-if="!isLoggedIn" class="login-status">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-button type="text" @click="login">登录</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->

<!--&lt;!&ndash;        &lt;!&ndash; 已登录状态 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <div v-else class="user-info">&ndash;&gt;-->
<!--&lt;!&ndash;          <el-dropdown @command="handleUserCommand" trigger="click">&ndash;&gt;-->
<!--&lt;!&ndash;            <span class="user-dropdown">&ndash;&gt;-->
<!--&lt;!&ndash;              <el-icon><User /></el-icon>&ndash;&gt;-->
<!--&lt;!&ndash;              {{ userInfo.userNickname || '用户' }}&ndash;&gt;-->
<!--&lt;!&ndash;              <el-icon class="el-icon&#45;&#45;right"><arrow-down /></el-icon>&ndash;&gt;-->
<!--&lt;!&ndash;            </span>&ndash;&gt;-->
<!--        <el-sub-menu index="1">-->
<!--          <template #title>-->
<!--            <el-icon>-->
<!--              <Stamp/>-->
<!--            </el-icon>-->
<!--            {{ userInfo ? userInfo.userNickname : '没登录' }}-->
<!--          </template>-->
<!--          <el-dropdown-item command="myInfo">我的信息</el-dropdown-item>-->
<!--          <el-dropdown-item command="myOrders">我的订单</el-dropdown-item>-->
<!--          <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>-->
<!--          <el-menu-item index="logout">退出-->
<!--            <el-icon>-->
<!--              <SwitchButton/>-->
<!--            </el-icon>-->
<!--          </el-menu-item>-->
<!--        </el-sub-menu>-->
<!--&lt;!&ndash;            <template #dropdown>&ndash;&gt;-->
<!--&lt;!&ndash;              <el-dropdown-menu>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-dropdown-item command="myInfo">我的信息</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-dropdown-item command="myOrders">我的订单</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-dropdown-item command="changePassword">修改密码</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-dropdown-menu>&ndash;&gt;-->
<!--&lt;!&ndash;            </template>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-dropdown>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--      </div>-->
<!--    </header>-->

<!--    &lt;!&ndash; 轮播图 &ndash;&gt;-->
<!--    <el-carousel height="410px" :autoplay="true">-->
<!--      <el-carousel-item v-for="(item, index) in carouselList" :key="index">-->
<!--        <img :src="item.img" class="carousel-img" alt="演唱会轮播图" />-->
<!--      </el-carousel-item>-->
<!--    </el-carousel>-->

<!--    &lt;!&ndash; 筛选区域（城市 + 时间） &ndash;&gt;-->
<!--    <div class="filter-section">-->
<!--      &lt;!&ndash; 城市筛选 &ndash;&gt;-->
<!--      <div class="city-filter">-->
<!--        <label>城市:</label>-->
<!--        <el-tag-->
<!--            v-for="city in allCities"-->
<!--            :key="city"-->
<!--            :type="selectedCity === city ? 'primary' : ''"-->
<!--            @click="handleCitySelect(city)"-->
<!--        >{{ city }}</el-tag>-->
<!--        <el-tag type="primary" @click="resetCity">全国</el-tag>-->
<!--      </div>-->
<!--      &lt;!&ndash; 时间筛选 &ndash;&gt;-->
<!--      <div class="time-filter">-->
<!--        <label>时间:</label>-->
<!--        <el-tag-->
<!--            v-for="timeRange in timeRanges"-->
<!--            :key="timeRange.value"-->
<!--            :type="selectedTimeRange === timeRange.value ? 'primary' : ''"-->
<!--            @click="handleTimeSelect(timeRange.value)"-->
<!--        >{{ timeRange.label }}</el-tag>-->
<!--        <el-date-picker-->
<!--            v-model="customDateRange"-->
<!--            type="daterange"-->
<!--            range-separator="至"-->
<!--            start-placeholder="开始日期"-->
<!--            end-placeholder="结束日期"-->
<!--            @change="handleCustomDate"-->
<!--            class="custom-date-picker"-->
<!--        />-->
<!--      </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 演唱会列表 &ndash;&gt;-->
<!--    <div class="concert-section">-->
<!--      <h3 class="section-title">演唱会</h3>-->

<!--      &lt;!&ndash; 加载状态 &ndash;&gt;-->
<!--      <div v-if="loading" class="loading">加载中...</div>-->

<!--      &lt;!&ndash; 错误提示 &ndash;&gt;-->
<!--      <div v-if="error" class="error">{{ error }}</div>-->

<!--      &lt;!&ndash; 空状态 &ndash;&gt;-->
<!--      <div v-if="!loading && !error && concertInfo.length === 0" class="empty">-->
<!--        没有找到相关演唱会信息-->
<!--      </div>-->

<!--      &lt;!&ndash; 演唱会列表 &ndash;&gt;-->
<!--      <div class="concert-cards" v-if="!loading && !error && concertInfo.length > 0">-->
<!--        <el-card-->
<!--            v-for="(card, index) in concertInfo"-->
<!--            :key="card.id || index"-->
<!--            class="concert-card"-->
<!--            @click="goToConcertDetail(card.id)"-->
<!--        >-->
<!--          <div class="card-content-wrapper">-->
<!--            &lt;!&ndash; 图片区域 &ndash;&gt;-->
<!--            <div class="card-img-wrapper">-->
<!--              <img :src="card.photo" class="card-img" alt="演唱会海报" />-->
<!--            </div>-->
<!--            &lt;!&ndash; 文字区域 &ndash;&gt;-->
<!--            <div class="card-text-wrapper">-->
<!--              <p class="card-title">{{ card.title }}</p>-->
<!--              <p class="card-artist">艺人: {{ card.artist }}</p>-->
<!--              <p class="card-time">{{ formatDate(card.startdate) }}</p>-->
<!--              <p class="card-status">{{ card.status === 1 ? '售票中' : '即将开售' }}</p>-->
<!--            </div>-->
<!--          </div>-->
<!--        </el-card>-->
<!--      </div>-->

<!--      &lt;!&ndash; 分页组件 &ndash;&gt;-->
<!--      <div class="pagination-container" v-if="!loading && !error && concertInfo.length > 0">-->
<!--        <el-pagination-->
<!--            v-model:current-page="currentPage"-->
<!--            v-model:page-size="pageSize"-->
<!--            :total="total"-->
<!--            :page-sizes="[10, 20, 50, 100]"-->
<!--            layout="total, sizes, prev, pager, next, jumper"-->
<!--            @size-change="handleSizeChange"-->
<!--            @current-change="handleCurrentChange"-->
<!--        />-->
<!--      </div>-->
<!--    </div>-->
<!--    <Footer />-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--import { ref, onMounted, computed } from 'vue';-->
<!--import axios from 'axios';-->
<!--import Footer from '@/view/footer.vue';-->
<!--import { ElMessage } from 'element-plus';-->
<!--import { useRouter } from 'vue-router';-->
<!--import {User, ArrowDown, Stamp, SwitchButton} from '@element-plus/icons-vue';-->
<!--import loginApi from '@/api/login_api.js'-->
<!--// import router from "@/router";-->
<!--const router = useRouter();-->

<!--// 创建API客户端-->
<!--const apiClient = axios.create({-->
<!--  baseURL: 'http://localhost:8085',-->
<!--  timeout: 10000,-->
<!--});-->

<!--// 响应式变量-->
<!--const searchQuery = ref('');-->
<!--const concertInfo = ref([]);-->
<!--const loading = ref(false);-->
<!--const error = ref('');-->
<!--const currentPage = ref(1);-->
<!--const pageSize = ref(10);-->
<!--const total = ref(0);-->

<!--// 用户相关变量-->
<!--const userInfo = ref({-->
<!--  userNickname: '',-->
<!--  userRealname: '',-->
<!--  userPhone:'',-->
<!--  id: 0-->
<!--});-->

<!--// 计算属性：判断是否已登录-->
<!--const isLoggedIn = computed(() => {-->
<!--  return !!localStorage.getItem("token");-->
<!--});-->

<!--// 城市筛选相关变量-->
<!--const allCities = ref(['全部', '北京', '上海', '广州', '深圳', '成都', '杭州', '南京', '武汉']);-->
<!--const selectedCity = ref('全部');-->

<!--// 时间筛选相关变量-->
<!--const timeRanges = ref([-->
<!--  { label: '全部', value: 'all' },-->
<!--  { label: '今天', value: 'today' },-->
<!--  { label: '明天', value: 'tomorrow' },-->
<!--  { label: '本周末', value: 'weekend' },-->
<!--  { label: '一个月内', value: 'month' },-->
<!--]);-->
<!--const selectedTimeRange = ref('all');-->
<!--const customDateRange = ref([]);-->

<!--// 轮播图数据-->
<!--const carouselList = ref([-->
<!--  { img: 'https://img2.baidu.com/it/u=2438159428,931396326&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },-->
<!--  { img: 'https://img1.baidu.com/it/u=1995957879,4051069007&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },-->
<!--  { img: 'https://img1.baidu.com/it/u=1784420999,3772166039&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },-->
<!--]);-->

<!--// 获取用户信息-->
<!--async function getUserInfo() {-->
<!--  const token = localStorage.getItem("token");-->
<!--  console.log(token);-->
<!--  if (!token) {-->
<!--    await router.push("/login");-->
<!--    return;-->
<!--  }-->
<!--  try{-->
<!--    const res = await loginApi.logininfo();-->
<!--    userInfo.value = res;-->

<!--  }catch (error){-->
<!--    console.error("获取用户信息失败",error);-->
<!--    await router.push("/login");-->
<!--  }-->

<!--  // try {-->
<!--  //   // 这里需要根据您的实际API调整-->
<!--  //   const response = await apiClient.get('/user/info', {-->
<!--  //     headers: {-->
<!--  //       'Authorization': `Bearer ${token}`-->
<!--  //     }-->
<!--  //   });-->
<!--  //-->
<!--  //   if (response.data && response.data.code === 200) {-->
<!--  //     userInfo.value = response.data.data;-->
<!--  //   }-->
<!--  // } catch (error) {-->
<!--  //   console.error('获取用户信息失败:', error);-->
<!--  //   // 如果token失效，清除本地存储-->
<!--  //   localStorage.removeItem("token");-->
<!--  // }-->
<!--}-->

<!--// 用户下拉菜单命令处理-->
<!--function handleUserCommand(command) {-->
<!--  switch (command) {-->
<!--    case 'myInfo':-->
<!--      router.push('/user/profile');-->
<!--      break;-->
<!--    case 'myOrders':-->
<!--      router.push('/user/orders');-->
<!--      break;-->
<!--    case 'changePassword':-->
<!--      router.push('/user/change-password');-->
<!--      break;-->
<!--    case 'logout':-->
<!--      logout();-->
<!--      break;-->
<!--  }-->
<!--}-->

<!--// 登录-->
<!--function login() {-->
<!--  router.push({-->
<!--    name: 'login',-->
<!--  });-->
<!--}-->

<!--// 退出登录-->
<!--function logout() {-->
<!--  localStorage.removeItem("token");-->
<!--  userInfo.value = { userNickname: '', role: '', id: 0 };-->
<!--  ElMessage.success('已退出登录');-->
<!--  // 可以刷新页面或跳转到首页-->
<!--  router.push('/');-->
<!--}-->

<!--// 格式化日期-->
<!--const formatDate = (dateString) => {-->
<!--  if (!dateString) return '';-->
<!--  const date = new Date(dateString);-->
<!--  return date.toLocaleDateString();-->
<!--};-->

<!--// 处理城市选择-->
<!--const handleCitySelect = (city) => {-->
<!--  selectedCity.value = city;-->
<!--  fetchConcerts();-->
<!--};-->

<!--// 重置城市选择-->
<!--const resetCity = () => {-->
<!--  selectedCity.value = '全部';-->
<!--  fetchConcerts();-->
<!--};-->

<!--// 处理时间选择-->
<!--const handleTimeSelect = (timeRange) => {-->
<!--  selectedTimeRange.value = timeRange;-->
<!--  customDateRange.value = []; // 重置自定义日期-->
<!--  fetchConcerts();-->
<!--};-->

<!--// 处理自定义日期选择-->
<!--const handleCustomDate = (dateRange) => {-->
<!--  customDateRange.value = dateRange;-->
<!--  selectedTimeRange.value = 'custom'; // 标记为自定义时间-->
<!--  fetchConcerts();-->
<!--};-->

<!--// 搜索方法（多条件查询）-->
<!--async function fetchConcerts() {-->
<!--  currentPage.value = 1;-->
<!--  await searchConcert();-->
<!--}-->

<!--// 分页大小变化-->
<!--function handleSizeChange(newSize) {-->
<!--  pageSize.value = newSize;-->
<!--  searchConcert();-->
<!--}-->

<!--// 当前页变化-->
<!--function handleCurrentChange(newPage) {-->
<!--  currentPage.value = newPage;-->
<!--  searchConcert();-->
<!--}-->

<!--// 实际的搜索请求（支持多条件）-->
<!--async function searchConcert() {-->
<!--  try {-->
<!--    loading.value = true;-->
<!--    error.value = '';-->

<!--    const params = {-->
<!--      keyword: searchQuery.value,-->
<!--      city: selectedCity.value === '全部' ? '' : selectedCity.value,-->
<!--      timeRange: selectedTimeRange.value,-->
<!--      startDate: customDateRange.value[0]?.getTime(),-->
<!--      endDate: customDateRange.value[1]?.getTime(),-->
<!--      current: currentPage.value,-->
<!--      size: pageSize.value,-->
<!--    };-->

<!--    // 移除空参数-->
<!--    Object.keys(params).forEach((key) => {-->
<!--      if (params[key] === '' || params[key] === null || params[key] === undefined) {-->
<!--        delete params[key];-->
<!--      }-->
<!--    });-->

<!--    // 调用多条件查询接口-->
<!--    const response = await apiClient.get('/concert/multiCondition', { params });-->

<!--    if (response.data && response.data.code === 200) {-->
<!--      concertInfo.value = response.data.data.records || [];-->
<!--      total.value = response.data.data.total || 0;-->
<!--    }-->
<!--  } catch (err) {-->
<!--    console.error('搜索失败:', err);-->
<!--    error.value = '搜索失败，请稍后重试';-->
<!--    ElMessage.error('搜索失败，请重试');-->
<!--  } finally {-->
<!--    loading.value = false;-->
<!--  }-->
<!--}-->

<!--// 跳转到演唱会详情页-->
<!--function goToConcertDetail(id) {-->
<!--  router.push({-->
<!--    name: 'ConcertDetail',-->
<!--    params: { id },-->
<!--  });-->
<!--}-->

<!--// 页面挂载时获取数据-->
<!--onMounted(async () => {-->
<!--  await getUserInfo(); // 获取用户信息-->
<!--  await searchConcert();-->
<!--});-->
<!--</script>-->
<!--&lt;!&ndash;<script setup>&ndash;&gt;-->
<!--&lt;!&ndash;import { ref, onMounted } from 'vue';&ndash;&gt;-->
<!--&lt;!&ndash;import axios from 'axios';&ndash;&gt;-->
<!--&lt;!&ndash;import Footer from '@/view/footer.vue';&ndash;&gt;-->
<!--&lt;!&ndash;import { ElMessage } from 'element-plus';&ndash;&gt;-->
<!--&lt;!&ndash;import { useRouter } from 'vue-router';&ndash;&gt;-->

<!--&lt;!&ndash;const router = useRouter();&ndash;&gt;-->
<!--&lt;!&ndash;// 创建API客户端&ndash;&gt;-->
<!--&lt;!&ndash;const apiClient = axios.create({&ndash;&gt;-->
<!--&lt;!&ndash;  baseURL: 'http://localhost:8085',&ndash;&gt;-->
<!--&lt;!&ndash;  timeout: 10000,&ndash;&gt;-->
<!--&lt;!&ndash;});&ndash;&gt;-->

<!--&lt;!&ndash;// 响应式变量&ndash;&gt;-->
<!--&lt;!&ndash;const searchQuery = ref('');&ndash;&gt;-->
<!--&lt;!&ndash;const concertInfo = ref([]);&ndash;&gt;-->
<!--&lt;!&ndash;const loading = ref(false);&ndash;&gt;-->
<!--&lt;!&ndash;const error = ref('');&ndash;&gt;-->
<!--&lt;!&ndash;const currentPage = ref(1);&ndash;&gt;-->
<!--&lt;!&ndash;const pageSize = ref(10);&ndash;&gt;-->
<!--&lt;!&ndash;const total = ref(0);&ndash;&gt;-->

<!--&lt;!&ndash;// 城市筛选相关变量&ndash;&gt;-->
<!--&lt;!&ndash;const allCities = ref(['全部', '北京', '上海', '广州', '深圳', '成都', '杭州', '南京', '武汉']);&ndash;&gt;-->
<!--&lt;!&ndash;const selectedCity = ref('全部');&ndash;&gt;-->

<!--&lt;!&ndash;// 时间筛选相关变量&ndash;&gt;-->
<!--&lt;!&ndash;const timeRanges = ref([&ndash;&gt;-->
<!--&lt;!&ndash;  { label: '全部', value: 'all' },&ndash;&gt;-->
<!--&lt;!&ndash;  { label: '今天', value: 'today' },&ndash;&gt;-->
<!--&lt;!&ndash;  { label: '明天', value: 'tomorrow' },&ndash;&gt;-->
<!--&lt;!&ndash;  { label: '本周末', value: 'weekend' },&ndash;&gt;-->
<!--&lt;!&ndash;  { label: '一个月内', value: 'month' },&ndash;&gt;-->
<!--&lt;!&ndash;]);&ndash;&gt;-->
<!--&lt;!&ndash;const selectedTimeRange = ref('all');&ndash;&gt;-->
<!--&lt;!&ndash;const customDateRange = ref([]);&ndash;&gt;-->

<!--&lt;!&ndash;// 轮播图数据&ndash;&gt;-->
<!--&lt;!&ndash;const carouselList = ref([&ndash;&gt;-->
<!--&lt;!&ndash;  { img: 'https://img2.baidu.com/it/u=2438159428,931396326&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },&ndash;&gt;-->
<!--&lt;!&ndash;  { img: 'https://img1.baidu.com/it/u=1995957879,4051069007&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },&ndash;&gt;-->
<!--&lt;!&ndash;  { img: 'https://img1.baidu.com/it/u=1784420999,3772166039&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500' },&ndash;&gt;-->
<!--&lt;!&ndash;]);&ndash;&gt;-->

<!--&lt;!&ndash;// 格式化日期&ndash;&gt;-->
<!--&lt;!&ndash;const formatDate = (dateString) => {&ndash;&gt;-->
<!--&lt;!&ndash;  if (!dateString) return '';&ndash;&gt;-->
<!--&lt;!&ndash;  const date = new Date(dateString);&ndash;&gt;-->
<!--&lt;!&ndash;  return date.toLocaleDateString();&ndash;&gt;-->
<!--&lt;!&ndash;};&ndash;&gt;-->

<!--&lt;!&ndash;// 处理城市选择&ndash;&gt;-->
<!--&lt;!&ndash;const handleCitySelect = (city) => {&ndash;&gt;-->
<!--&lt;!&ndash;  selectedCity.value = city;&ndash;&gt;-->
<!--&lt;!&ndash;  fetchConcerts();&ndash;&gt;-->
<!--&lt;!&ndash;};&ndash;&gt;-->

<!--&lt;!&ndash;// 重置城市选择&ndash;&gt;-->
<!--&lt;!&ndash;const resetCity = () => {&ndash;&gt;-->
<!--&lt;!&ndash;  selectedCity.value = '全部';&ndash;&gt;-->
<!--&lt;!&ndash;  fetchConcerts();&ndash;&gt;-->
<!--&lt;!&ndash;};&ndash;&gt;-->

<!--&lt;!&ndash;// 处理时间选择&ndash;&gt;-->
<!--&lt;!&ndash;const handleTimeSelect = (timeRange) => {&ndash;&gt;-->
<!--&lt;!&ndash;  selectedTimeRange.value = timeRange;&ndash;&gt;-->
<!--&lt;!&ndash;  customDateRange.value = []; // 重置自定义日期&ndash;&gt;-->
<!--&lt;!&ndash;  fetchConcerts();&ndash;&gt;-->
<!--&lt;!&ndash;};&ndash;&gt;-->

<!--&lt;!&ndash;// 处理自定义日期选择&ndash;&gt;-->
<!--&lt;!&ndash;const handleCustomDate = (dateRange) => {&ndash;&gt;-->
<!--&lt;!&ndash;  customDateRange.value = dateRange;&ndash;&gt;-->
<!--&lt;!&ndash;  selectedTimeRange.value = 'custom'; // 标记为自定义时间&ndash;&gt;-->
<!--&lt;!&ndash;  fetchConcerts();&ndash;&gt;-->
<!--&lt;!&ndash;};&ndash;&gt;-->

<!--&lt;!&ndash;// 搜索方法（多条件查询）&ndash;&gt;-->
<!--&lt;!&ndash;async function fetchConcerts() {&ndash;&gt;-->
<!--&lt;!&ndash;  currentPage.value = 1;&ndash;&gt;-->
<!--&lt;!&ndash;  await searchConcert();&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;// 登录&ndash;&gt;-->
<!--&lt;!&ndash;function login() {&ndash;&gt;-->
<!--&lt;!&ndash;  router.push({&ndash;&gt;-->
<!--&lt;!&ndash;    name: 'login',&ndash;&gt;-->
<!--&lt;!&ndash;  });&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;//退出&ndash;&gt;-->
<!--&lt;!&ndash;function logout() {&ndash;&gt;-->
<!--&lt;!&ndash;  localStorage.removeItem("token");&ndash;&gt;-->
<!--&lt;!&ndash;  router.push('/login');&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;// 分页大小变化&ndash;&gt;-->
<!--&lt;!&ndash;function handleSizeChange(newSize) {&ndash;&gt;-->
<!--&lt;!&ndash;  pageSize.value = newSize;&ndash;&gt;-->
<!--&lt;!&ndash;  searchConcert();&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;// 当前页变化&ndash;&gt;-->
<!--&lt;!&ndash;function handleCurrentChange(newPage) {&ndash;&gt;-->
<!--&lt;!&ndash;  currentPage.value = newPage;&ndash;&gt;-->
<!--&lt;!&ndash;  searchConcert();&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;// 实际的搜索请求（支持多条件）&ndash;&gt;-->
<!--&lt;!&ndash;async function searchConcert() {&ndash;&gt;-->
<!--&lt;!&ndash;  try {&ndash;&gt;-->
<!--&lt;!&ndash;    loading.value = true;&ndash;&gt;-->
<!--&lt;!&ndash;    error.value = '';&ndash;&gt;-->

<!--&lt;!&ndash;    const params = {&ndash;&gt;-->
<!--&lt;!&ndash;      keyword: searchQuery.value,&ndash;&gt;-->
<!--&lt;!&ndash;      city: selectedCity.value === '全部' ? '' : selectedCity.value,&ndash;&gt;-->
<!--&lt;!&ndash;      timeRange: selectedTimeRange.value,&ndash;&gt;-->
<!--&lt;!&ndash;      startDate: customDateRange.value[0]?.getTime(),&ndash;&gt;-->
<!--&lt;!&ndash;      endDate: customDateRange.value[1]?.getTime(),&ndash;&gt;-->
<!--&lt;!&ndash;      current: currentPage.value,&ndash;&gt;-->
<!--&lt;!&ndash;      size: pageSize.value,&ndash;&gt;-->
<!--&lt;!&ndash;    };&ndash;&gt;-->

<!--&lt;!&ndash;    // 移除空参数&ndash;&gt;-->
<!--&lt;!&ndash;    Object.keys(params).forEach((key) => {&ndash;&gt;-->
<!--&lt;!&ndash;      if (params[key] === '' || params[key] === null || params[key] === undefined) {&ndash;&gt;-->
<!--&lt;!&ndash;        delete params[key];&ndash;&gt;-->
<!--&lt;!&ndash;      }&ndash;&gt;-->
<!--&lt;!&ndash;    });&ndash;&gt;-->

<!--&lt;!&ndash;    // 调用多条件查询接口&ndash;&gt;-->
<!--&lt;!&ndash;    const response = await apiClient.get('/concert/multiCondition', { params });&ndash;&gt;-->

<!--&lt;!&ndash;    if (response.data && response.data.code === 200) {&ndash;&gt;-->
<!--&lt;!&ndash;      concertInfo.value = response.data.data.records || [];&ndash;&gt;-->
<!--&lt;!&ndash;      total.value = response.data.data.total || 0;&ndash;&gt;-->
<!--&lt;!&ndash;    }&ndash;&gt;-->
<!--&lt;!&ndash;  } catch (err) {&ndash;&gt;-->
<!--&lt;!&ndash;    console.error('搜索失败:', err);&ndash;&gt;-->
<!--&lt;!&ndash;    error.value = '搜索失败，请稍后重试';&ndash;&gt;-->
<!--&lt;!&ndash;    ElMessage.error('搜索失败，请重试');&ndash;&gt;-->
<!--&lt;!&ndash;  } finally {&ndash;&gt;-->
<!--&lt;!&ndash;    loading.value = false;&ndash;&gt;-->
<!--&lt;!&ndash;  }&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;// 跳转到演唱会详情页&ndash;&gt;-->
<!--&lt;!&ndash;function goToConcertDetail(id) {&ndash;&gt;-->
<!--&lt;!&ndash;  router.push({&ndash;&gt;-->
<!--&lt;!&ndash;    name: 'ConcertDetail',&ndash;&gt;-->
<!--&lt;!&ndash;    params: { id },&ndash;&gt;-->
<!--&lt;!&ndash;  });&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->

<!--&lt;!&ndash;// 页面挂载时获取数据&ndash;&gt;-->
<!--&lt;!&ndash;onMounted(async () => {&ndash;&gt;-->
<!--&lt;!&ndash;  await searchConcert();&ndash;&gt;-->
<!--&lt;!&ndash;});&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--<style scoped>-->
<!--.damai-page {-->
<!--  width: 100%;-->
<!--  max-width: 1200px;-->
<!--  margin: 0 auto;-->
<!--  padding: 0 15px;-->
<!--}-->

<!--.header {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: flex-start;-->
<!--  padding: 15px 0;-->
<!--  border-bottom: 1px solid #eee;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 15px;-->
<!--}-->

<!--.logo {-->
<!--  font-size: 24px;-->
<!--  font-weight: bold;-->
<!--  color: #ff6700;-->
<!--}-->

<!--.nav a {-->
<!--  margin: 0 15px;-->
<!--  text-decoration: none;-->
<!--  color: #333;-->
<!--  padding: 5px;-->
<!--}-->

<!--.nav a:hover {-->
<!--  color: #ff6700;-->
<!--}-->

<!--.carousel-img {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  object-fit: cover;-->
<!--}-->

<!--/* 筛选区域样式 */-->
<!--.filter-section {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  padding: 15px 0;-->
<!--  border-bottom: 1px solid #eee;-->
<!--  flex-wrap: wrap;-->
<!--  gap: 15px;-->
<!--  margin-bottom: 20px;-->
<!--}-->

<!--.city-filter,-->
<!--.time-filter {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  gap: 10px;-->
<!--}-->

<!--.city-filter label,-->
<!--.time-filter label {-->
<!--  font-weight: 500;-->
<!--}-->

<!--.el-tag {-->
<!--  cursor: pointer;-->
<!--  margin-right: 5px;-->
<!--}-->

<!--.custom-date-picker {-->
<!--  margin-left: 10px;-->
<!--}-->

<!--.concert-section {-->
<!--  margin: 30px 0;-->
<!--}-->

<!--.section-title {-->
<!--  font-size: 20px;-->
<!--  font-weight: bold;-->
<!--  margin-bottom: 15px;-->
<!--  padding-bottom: 5px;-->
<!--  border-bottom: 2px solid #ff6700;-->
<!--  display: inline-block;-->
<!--}-->

<!--.concert-cards {-->
<!--  display: grid;-->
<!--  grid-template-columns: repeat(3, 1fr);-->
<!--  gap: 20px;-->
<!--}-->

<!--.concert-card {-->
<!--  width: 100%;-->
<!--  box-sizing: border-box;-->
<!--  padding: 15px;-->
<!--  border: 1px solid #f0f0f0;-->
<!--  border-radius: 8px;-->
<!--  overflow: hidden;-->
<!--  transition: box-shadow 0.3s, transform 0.3s;-->
<!--  height: 300px;-->
<!--}-->

<!--.concert-card:hover {-->
<!--  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);-->
<!--  transform: translateY(-5px);-->
<!--}-->

<!--.card-content-wrapper {-->
<!--  display: flex;-->
<!--  height: 100%;-->
<!--}-->

<!--.card-img-wrapper {-->
<!--  width: 120px;-->
<!--  height: 150px;-->
<!--  flex-shrink: 0;-->
<!--  margin-right: 15px;-->
<!--  border-radius: 6px;-->
<!--  overflow: hidden;-->
<!--}-->

<!--.card-img {-->
<!--  width: 100%;-->
<!--  height: 100%;-->
<!--  object-fit: cover;-->
<!--  transition: transform 0.3s;-->
<!--}-->

<!--.concert-card:hover .card-img {-->
<!--  transform: scale(1.05);-->
<!--}-->

<!--.card-text-wrapper {-->
<!--  flex: 1;-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  justify-content: space-between;-->
<!--  min-height: 0;-->
<!--}-->

<!--.card-title {-->
<!--  font-weight: bold;-->
<!--  margin-bottom: 10px;-->
<!--  font-size: 16px;-->
<!--  line-height: 1.4;-->
<!--  display: -webkit-box;-->
<!--  -webkit-line-clamp: 2;-->
<!--  -webkit-box-orient: vertical;-->
<!--  overflow: hidden;-->
<!--  color: #222;-->
<!--  min-height: 44px;-->
<!--}-->

<!--.card-artist {-->
<!--  font-size: 14px;-->
<!--  color: #666;-->
<!--  margin-bottom: 8px;-->
<!--  overflow: hidden;-->
<!--  text-overflow: ellipsis;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--.card-time {-->
<!--  font-size: 14px;-->
<!--  color: #888;-->
<!--  margin-bottom: 10px;-->
<!--  overflow: hidden;-->
<!--  text-overflow: ellipsis;-->
<!--  white-space: nowrap;-->
<!--}-->

<!--.card-status {-->
<!--  color: #ff6700;-->
<!--  font-weight: 500;-->
<!--  font-size: 14px;-->
<!--  margin-top: auto;-->
<!--  padding-top: 5px;-->
<!--  border-top: 1px dashed #eee;-->
<!--}-->

<!--.loading,-->
<!--.error,-->
<!--.empty {-->
<!--  text-align: center;-->
<!--  padding: 50px 0;-->
<!--  font-size: 16px;-->
<!--}-->

<!--.error {-->
<!--  color: #f56c6c;-->
<!--}-->

<!--.pagination-container {-->
<!--  margin-top: 30px;-->
<!--  display: flex;-->
<!--  justify-content: center;-->
<!--  padding: 15px 0;-->
<!--  background: #f9f9f9;-->
<!--  border-radius: 8px;-->
<!--}-->

<!--.user-actions {-->
<!--  margin-left: auto;-->
<!--}-->

<!--/* 响应式调整 */-->
<!--@media (max-width: 1024px) {-->
<!--  .concert-cards {-->
<!--    grid-template-columns: repeat(2, 1fr);-->
<!--  }-->
<!--}-->

<!--@media (max-width: 768px) {-->
<!--  .filter-section {-->
<!--    flex-direction: column;-->
<!--    align-items: flex-start;-->
<!--  }-->

<!--  .city-filter,-->
<!--  .time-filter {-->
<!--    width: 100%;-->
<!--  }-->

<!--  .concert-cards {-->
<!--    grid-template-columns: 1fr;-->
<!--  }-->

<!--  .card-img-wrapper {-->
<!--    width: 100%;-->
<!--    height: 200px;-->
<!--    margin-right: 0;-->
<!--    margin-bottom: 12px;-->
<!--  }-->

<!--  .card-content-wrapper {-->
<!--    flex-direction: column;-->
<!--  }-->
<!--}-->

<!--.user-actions {-->
<!--  margin-left: auto;-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.login-status {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.user-info {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--}-->

<!--.user-dropdown {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  cursor: pointer;-->
<!--  padding: 8px 12px;-->
<!--  border-radius: 4px;-->
<!--  transition: background-color 0.3s;-->
<!--}-->

<!--.user-dropdown:hover {-->
<!--  background-color: #f5f5f5;-->
<!--}-->

<!--.user-dropdown .el-icon {-->
<!--  margin-right: 5px;-->
<!--}-->

<!--.el-icon&#45;&#45;right {-->
<!--  margin-left: 5px;-->
<!--  margin-right: 0;-->
<!--}-->

<!--</style>-->